<!--
 * @Author: Wangtao
 * @Date: 2020-09-28 10:50:52
 * @LastEditors: Wangtao
 * @LastEditTime: 2021-04-12 19:30:12
-->
<template>
  <CardSlot
    v-model="activeName"
    module="child_callSheet"
    :tabPanes="tabPanes"
    :cardLoading="loading"
    :isShowMore="isShowMore"
    @tab-change="tabChange"
    :empty="!this.cardList || this.cardList.length === 0"
    ref="cardSlot"
  >
    <template slot="cardList">
      <CallCard
        :cardList="cardList"
        :activeName="activeName"
        @deleteCard="deleteCard"
      ></CallCard>
    </template>
  </CardSlot>
</template>

<script lang="ts">
import CardSlot from '@/components/cardLayout/CardSlot.vue'
import CallCard from './CallCard.vue'
import { Component, Vue, Watch } from 'vue-property-decorator'
import { isHasFuncOrMenus } from '@/utils/common'
import { CallCardModule } from '@/store/modules/cti/callCard'
import VueRouter, { RouterOptions, Route } from 'vue-router'
import { Store } from 'vuex'

@Component({ name: 'CallCardGroup', components: { CardSlot, CallCard } })
export default class CallCardGroup extends Vue {
  private loading: boolean = false
  private $route: Route | undefined
  private $router: VueRouter | undefined
  private $store: any
  private activeName: string = 'cdr_call'
  private isShowMore: boolean = false
  private created (): void {
    CallCardModule.INIT_CARD()
    this.handleRouteParams()
  }

  private get cardList () {
    if (this.activeName === 'cdr_call') {
      return CallCardModule.callInList
    } else if (this.activeName === 'cdr_outbound') {
      return CallCardModule.outboundList
    }
  }

  private tabChange (type) {
    (this.$router as VueRouter).push({ path: `/call_workBench/index/${type}/empty` })
  }

  private deleteCard (item) {
    CallCardModule.RMOVE_CALL_CARD({ type: this.activeName, id: item.id })
  }

  private handleRouteParams () {
    const currentRouteParams = (this.$router as VueRouter).currentRoute.params
    if ((this.$route as Route).name === 'callCard') {
      if (currentRouteParams && currentRouteParams.activeName) {
        this.activeName = currentRouteParams.activeName
      }
    }
  }

  private get tabPanes () { // tab上的未读数
    return [{
      name: '来电',
      type: 'cdr_call'
    }, {
      name: '外呼',
      type: 'cdr_outbound'
    }]
  }

  @Watch('cardList')
  private cardListChange (): void {
    this.$nextTick(() => {
      (this.$refs as any).cardSlot.scrollRefresh()
    })
  }

  @Watch('$route')
  private routeChange (): void {
    this.handleRouteParams()
  }

  private mounted () {
    if (isHasFuncOrMenus('callSheet', this.$store.state.common.session.user, true)) { // 是否有通话记录的权限
      this.isShowMore = true
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>
